<template>
    <div>
      <h2>个人信息</h2>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item to="/MemberMain">主页</el-breadcrumb-item>
        <el-breadcrumb-item>个人信息</el-breadcrumb-item>
      </el-breadcrumb>
  
      <el-card style="margin-top: 20px;">
        <el-descriptions title="会员基本信息" border>
          <el-descriptions-item label="会员账号/卡号">{{ member.memberAccount }}</el-descriptions-item>
          <el-descriptions-item label="姓名">{{ member.memberName }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ member.memberGender }}</el-descriptions-item>
          <el-descriptions-item label="年龄">{{ member.memberAge }}</el-descriptions-item>
          <el-descriptions-item label="联系方式">{{ member.memberPhone }}</el-descriptions-item>
          <el-descriptions-item label="身高">{{ member.memberHeight }} cm</el-descriptions-item>
          <el-descriptions-item label="体重">{{ member.memberWeight }} kg</el-descriptions-item>
          <el-descriptions-item label="办卡时间" >{{ formatDate(member.cardTime) }}</el-descriptions-item>
          <el-descriptions-item label="剩余课时">{{ member.cardNextClass }}</el-descriptions-item>
        </el-descriptions>

        <div style="margin-top: 20px; display: flex; justify-content: center; gap: 20px;">
          <el-button type="primary" @click="onEdit">编辑个人信息</el-button>
          <el-button type="warning" @click="goToChangePassword">修改密码</el-button>
        </div>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { ElMessage } from 'element-plus'
  import axios from 'axios'
  import dayjs from "dayjs";
  
  const router = useRouter()
  
  // 假数据，后面可以用axios动态替换
  const member = ref({})
  // const member = ref({
  //   memberAccount: 'M123456',
  //   memberName: '张三',
  //   memberGender: '男',
  //   memberAge: 28,
  //   memberPhone: '13800001111',
  //   memberHeight: 175,
  //   memberWeight: 70,
  //   cardTime: '2023-01-10',
  //   cardNextClass: 8
  // })

  
  // 页面挂载时动态请求后端数据
   onMounted(() => {
     axios.get('/server/member/getMyInfo',{
       headers: {
         'Authorization': localStorage.getItem('token')
       }
     })
       .then(response => {
         if (response.data.code === 200) {
           member.value = response.data.data
         } else {
           ElMessage.error('无法加载个人信息')
         }
       })
       .catch(() => {
         ElMessage.error('请求失败')
       })
   })

  const onEdit = () => {
    router.push('/MemberMain/EditPersonalInfo')
  }

  const goToChangePassword = () => {
    router.push('/MemberMain/EditMemberPassword')  // 假设你已有这个页面
  }


  const formatDate = (dateString) => dayjs(dateString).format('YYYY-MM-DD HH:mm')
  </script>
  
  <style scoped>
  h2 {
    margin-bottom: 10px;
  }
  </style>
  